<!DOCTYPE html>
<html>
<!--模板【阿文菌导航页web03】的基础上修改-->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/particles.min.js"></script>
    <title>SVG图标预览</title>
    <style>
        svg {
            color: #fff;
            width: 30px;
            height: 30px;
            margin: 5px;
            vertical-align: middle;
        }

        strong {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div id="top">
            <ul>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#android"></use>
                    </svg>
                    <strong>android</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#macos"></use>
                    </svg>
                    <strong>macos</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#windows"></use>
                    </svg>
                    <strong>windows</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#ios"></use>
                    </svg>
                    <strong>ios</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#router"></use>
                    </svg>
                    <strong>router</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#back"></use>
                    </svg>
                    <strong>back</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#dashboard"></use>
                    </svg>
                    <strong>dashboard</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#filters"></use>
                    </svg>
                    <strong>filters</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#question"></use>
                    </svg>
                    <strong>question</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#settings"></use>
                    </svg>
                    <strong>settings</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#refresh"></use>
                    </svg>
                    <strong>refresh</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#dns_privacy"></use>
                    </svg>
                    <strong>dns_privacy</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#network"></use>
                    </svg>
                    <strong>network</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#location"></use>
                    </svg>
                    <strong>location</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#cross"></use>
                    </svg>
                    <strong>cross</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#update"></use>
                    </svg>
                    <strong>update</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#privacy"></use>
                    </svg>
                    <strong>privacy</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#lock"></use>
                    </svg>
                    <strong>lock</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#list"></use>
                    </svg>
                    <strong>list</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#detailed_list"></use>
                    </svg>
                    <strong>detailed_list</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#magnifier"></use>
                    </svg>
                    <strong>magnifier</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#auto"></use>
                    </svg>
                    <strong>auto</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#dark"></use>
                    </svg>
                    <strong>dark</strong>
                </li>
                <li> <svg>
                        <use xlink:href="custom/img/svg/ico.svg#light"></use>
                    </svg>
                    <strong>light</strong>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>